<template>
  <div class="login_box">
    <img class="bg" src="../../assets/background.png" alt="" srcset="" />
    <div class="login_title">
    </div>
    <div class="login_min">
      <div class="logon_item">
        <div class="login_min_title">用户登录</div>
        <el-form :model="login_from" :rules="rules" ref="ruleFormRef">
          <el-form-item label="账号：" prop="userName">
            <el-input v-model="login_from.userName" placeholder="请填写账号" />
            <span><img src="../../assets/name.svg" alt="" /></span>
          </el-form-item>
          <el-form-item label="密码：" style="margin-top: 24px" prop="password">
            <el-input
              v-model="login_from.password"
              type="password"
              placeholder="请填写密码"
            />
            <img src="../../assets/pass.svg" alt="" />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="go()"
          >登录</el-button
        >
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_min">
      </div>
    </div>
  </div>
</template>
<script setup>
import { useLoginStore } from "../../store/login";
import { Iphone, Key } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import axios from "@/utils/axios";
const router = useRouter();
const log = useLoginStore();

const ruleFormRef = ref(null);
const login_from = ref({
  userName: "",
  password: "",
});
const rules = reactive({
  userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const go = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      axios({
          url: "/login",
          method: "post",
          data: login_from.value
        }).then((res) => {
          if(res.code ==='200'){
            if(res.data.role_id === '1'){
              sessionStorage.setItem("user",res.data.real_name)
              router.push("/Configure");
            }else{
              ElMessage({
                message: "您不是教师用户,无法登录",
                type: 'error',
              })
            }
          }else{
            ElMessage({
              message: res.msg,
              type: 'error',
            })
          }
        });
    }
  });
}

</script>
<style lang="scss" scoped>
.login_box {
  height: 100vh;
  // background-image: url("../../assets/background.png");
  // background-size: 100% 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -4;
  }
  .login_title {
    // padding: 26px 32px;
    position: absolute;
    top: 26px;
    left: 32px;
    img {
      width: 240px;
    }
  }
  .login_min {
    width: 440px;
    // height: 414px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    // margin: auto;
    // margin-top: 165px;
    .logon_item {
      padding: 48px 60px;
      .login_min_title {
        font-size: 20px;
        font-family: MicrosoftYaHei;
        color: #333333;
        line-height: 26px;
        text-align: center;
      }
    }
  }
}
:deep(.el-form-item) {
  display: initial;
  position: relative;

  img {
    position: absolute;
    top: 14px;
    left: 16px;
  }
}
:deep(.el-input__wrapper) {
  padding-left: 40px;
  height: 44px;
}
:deep(.el-input__inner) {
  height: 44px;
}
:deep(.el-form-item__label) {
  margin-top: 24px;
}
:deep(.el-button) {
  width: 323px;
  height: 54px;
  background: #155bd3;
  box-shadow: 0px 2px 8px 0px rgba(0, 25, 132, 0.2);
  border-radius: 4px;
  font-size: 18px;
  font-family: MicrosoftYaHei;
  color: #ffffff;
  line-height: 24px;
  margin-top: 40px;
}
:deep(.el-form-item__error) {
  right: 0;
  top: 110%;
}

:deep(.el-input) {
  input {
    background-color: transparent;
    &:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
      -webkit-text-fill-color: #000 !important;

      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;

      background-color: transparent;

      background-image: none;

      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }
  }
}
.code_one {
  display: flex;
  margin-top: 24px;
}
.code_right {
  width: 104px;
  height: 44px;
  margin-left: 16px;
  border: 1px solid #ccc;
}
.bottom {
  position: fixed;
  bottom: 23px;
  height: 50px;
  width: 100%;
}
.bottom_min {
  text-align: center;
  width: 100%;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #ffffff;
}
</style>
